<template>
  <div class="white-box" v-loading.fullscreen="loading">
    <el-form ref="formRef" :model="formData" :rules="formRule" label-width="120px">

      <el-form-item label="楼盘名称" prop="title">
        <el-input v-model.trim="formData.title" clearable placeholder="请输入楼盘名称"/>
      </el-form-item>
      <el-form-item label="开发商" prop="developer_name">
        <el-input v-model.trim="formData.developer_name" clearable placeholder="请输入开发商"/>
      </el-form-item>
      <el-form-item label="单价" prop="one_price">
        <el-input v-model.trim="formData.one_price" clearable placeholder="请输入单价" oninput="value=value.replace(/[^\d.]/g,'')">
          <template #append>万/平米</template>
        </el-input>
      </el-form-item>
      <el-form-item label="最小面积" prop="min_area_num">
        <el-input v-model.trim="formData.min_area_num" clearable placeholder="请输入单价" oninput="value=value.replace(/[^\d.]/g,'')">
          <template #append>平米</template>
        </el-input>
      </el-form-item>
      <el-form-item label="最大面积" prop="max_area_num">
        <el-input v-model.trim="formData.max_area_num" clearable placeholder="请输入单价" oninput="value=value.replace(/[^\d.]/g,'')">
          <template #append>平米</template>
        </el-input>
      </el-form-item>
      <el-form-item label="所属片区" prop="pianqu_id">
        <el-select v-model="formData.pianqu_id" placeholder="请选择所属片区">
          <el-option :label="item.label" :value="item.value" v-for="(item, index) in selectOptions.pianqu_id" :key="index"/>
        </el-select>
      </el-form-item>
      <el-form-item label="结构类型" prop="jiegou_id">
        <el-select v-model="formData.jiegou_id" placeholder="请选择结构类型">
          <el-option :label="item.label" :value="item.value" v-for="(item, index) in selectOptions.jiegou_id" :key="index"/>
        </el-select>
      </el-form-item>
      <el-form-item label="出售状态" prop="sell_status">
        <el-radio-group v-model="formData.sell_status">
          <el-radio :label="1">待售</el-radio>
          <el-radio :label="2">在售</el-radio>
          <el-radio :label="3">售馨</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="开盘时间" prop="open_time">
        <el-date-picker
            v-model="formData.open_time"
            type="date"
            placeholder="选择开盘时间"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
        />
      </el-form-item>

      <el-form-item label="物业费" prop="wuye_price">
        <el-input v-model.trim="formData.wuye_price" clearable placeholder="请输入物业费" oninput="value=value.replace(/[^\d.]/g,'')">
          <template #append>元/平米/月</template>
        </el-input>
      </el-form-item>
      <el-form-item label="绿化率" prop="lvhua_ratio">
        <el-input v-model.trim="formData.lvhua_ratio" clearable placeholder="请输入绿化率" oninput="value=value.replace(/[^\d.]/g,'')">
          <template #append>%</template>
        </el-input>
      </el-form-item>
      <el-form-item label="容积率" prop="rongji_ratio">
        <el-input v-model.trim="formData.rongji_ratio" clearable placeholder="请输入绿化率"/>
      </el-form-item>
      <el-form-item label="总户数" prop="total_house_num">
        <el-input v-model.trim="formData.total_house_num" clearable placeholder="请输入总户数" oninput="value=value.replace(/[^\d]/g,'')"/>
      </el-form-item>
      <el-form-item label="水电类型" prop="shuidian_id">
        <el-select v-model="formData.shuidian_id" placeholder="请选择水电类型">
          <el-option :label="item.label" :value="item.value" v-for="(item, index) in selectOptions.shuidian_id" :key="index"/>
        </el-select>
      </el-form-item>
      <el-form-item label="楼盘标签(亮点)" prop="trait_id">
        <el-select v-model="formData.trait_id" placeholder="请选择楼盘标签(亮点)" multiple>
          <el-option :label="item.label" :value="item.value" v-for="(item, index) in selectOptions.trait_id" :key="index"/>
        </el-select>
      </el-form-item>
      <el-form-item label="上架状态" prop="shangjia_status">
        <el-radio-group v-model="formData.shangjia_status">
          <el-radio :label="1">上架</el-radio>
          <el-radio :label="2">下架</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="是否推荐" prop="is_tuijian">
        <el-radio-group v-model="formData.is_tuijian">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="2">不是</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="楼盘图片" prop="img1">
        <File-Oss-upload v-model="formData.img1" :fileSize="50" :limit="9" :fileType="['png', 'jpg', 'jpeg']" listType="picture-card"></File-Oss-upload>
      </el-form-item>
      <el-form-item label="样板间图片" prop="img2">
        <File-Oss-upload v-model="formData.img2" :fileSize="50" :limit="9" :fileType="['png', 'jpg', 'jpeg']" listType="picture-card"></File-Oss-upload>
      </el-form-item>
      <el-row :gutter="10">
        <el-col :span="6">
          <el-form-item label="纬度" prop="lat">
            <el-input v-model.trim="formData.lat" clearable placeholder="请输入纬度" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="经度" prop="lng"  label-width="50px">
            <el-input v-model.trim="formData.lng" clearable placeholder="请输入经度" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="handleLon">获取经纬度</el-button>
        </el-col>
      </el-row>
      <el-form-item label="详细地址" prop="addr">
        <el-input v-model.trim="formData.addr" clearable placeholder="请输入详细地址" :rows="2" type="textarea"/>
      </el-form-item>
      <el-form-item>
        <div class="foot-btn flexs-center" style="margin-top: 30px">
          <el-button type="primary" size="large" :loading="btnLoading" @click="submitForm(formRef)">{{new_house_id?'确认修改':'确认添加'}}</el-button>
        </div>
      </el-form-item>
    </el-form>

    <go-back/>
  </div>
</template>

<script setup>
import {getCurrentInstance, ref, onMounted, shallowRef, reactive, onBeforeUnmount} from "vue"
import {useRouter, useRoute} from "vue-router"
import {UploadFilled, CloseBold,Plus} from "@element-plus/icons-vue"
import GoBack from "@components/GoBack.vue"
import "@wangeditor/editor/dist/css/style.css"
import FileOssUpload from "@/components/FileOssUpload.vue"
import {validNumOrPoint} from "@common/utils";

const router = useRouter()
const route = useRoute()
const {proxy} = getCurrentInstance()


const new_house_id = route.query.new_house_id || ""

onMounted(() => {
  getSelectOptions()
  if (new_house_id) {
    getDetail()
  }
})
/**
 * 添加
 * @param {Boolean} btnLoading 提交按钮状态
 * @param {Array} formRef 表单规则
 * @param {Object} formData  表单字段
 * @param {Object} formRule  表单提示
 * @param {Function} submitForm 提交表单
 */
const btnLoading = ref(false)
const loading = ref(false)
const formRef = ref(null)
const formData = reactive({
  title: '',
  pianqu_id: '',
  developer_name: '',
  type_id: '',
  one_price: '',
  min_area_num: '',
  max_area_num: '',
  jiegou_id: '',
  sell_status: 1,
  open_time: '',
  wuye_price: '',
  lvhua_ratio: '',
  rongji_ratio: '',
  total_house_num: '',
  trait_id: [],
  img1:[],
  img2:[],
  lat:'',
  lng:'',
  addr:'',
  shangjia_status:1,
  is_tuijian:1
})
const detail = reactive({})
if(new_house_id){
  formData.new_house_id = new_house_id
}

const formRule = reactive({
  title: [{required: true, message: "请输入楼盘名称", trigger: "blur"}],
  developer_name: [{required: true, message: "请输入开发商", trigger: "blur"}],
  one_price:[{required: true, message: "请输入单价", trigger: "blur"},{validator:proxy.$util.validNumOrPoint,trigger: "blur"}],
  min_area_num: [{required: true, message: "请输入最小面积", trigger: "blur"},{validator:proxy.$util.validNumOrPoint,trigger: "blur"}],
  max_area_num: [{required: true, message: "请输入最大面积", trigger: "blur"},{validator:proxy.$util.validNumOrPoint,trigger: "blur"}],
  wuye_price: [{required: true, message: "请输入物业费", trigger: "blur"},{validator:proxy.$util.validNumOrPoint,trigger: "blur"}],
  lvhua_ratio: [{required: true, message: "请输入绿化率", trigger: "blur"},{validator:proxy.$util.validNumOrPoint,trigger: "blur"}],
  rongji_ratio: [{required: true, message: "请输入容积率", trigger: "blur"}],
  total_house_num: [{required: true, message: "请输入总户数", trigger: "blur"}],
  pianqu_id: [{required: true, message: "请选择所属片区", trigger: "change"}],
  type_id: [{required: true, message: "请选择房源类型", trigger: "change"}],
  jiegou_id: [{required: true, message: "请选择结构类型", trigger: "change"}],
  shuidian_id: [{required: true, message: "请选择水电类型", trigger: "change"}],
  shangjia_status: [{required: true, message: "请选择上架状态", trigger: "change"}],
  sell_status: [{required: true, message: "请选择出售状态", trigger: "change"}],
  is_tuijian: [{required: true, message: "请选择是否推荐", trigger: "change"}],
  trait_id: [{required: true, message: "请选择楼盘标签(亮点)", trigger: "change"}],
  img1: [{required: true, message: "请选择楼盘图片", trigger: "change"}],
  img2: [{required: true, message: "请选择样板间图片", trigger: "change"}],
  lat: [{
    required: true,
    message: "请输入纬度",
    trigger: "blur"
  }],
  lng: [{
    required: true,
    message: "请输入经度",
    trigger: "blur"
  }],
  addr:[{
    required: true,
    message: "请输入详细地址",
    trigger: "blur"
  }],
})
const getDetail = () => {
  loading.value = true
  proxy.$axios
      .get("admin/house/new/detail", {
        params: {
          new_house_id: new_house_id,
        },
      })
      .then((res) => {
        loading.value = false
        if (res.data.code == 200) {
          let result = res.data.data
          for (let key in formData) {
            formData[key] = result[key]
          }
          // open_time
        } else {
          proxy.$message({message: res.data.msg, type: "error"})
        }
      })
      .catch((err) => {
        loading.value = false
      })
}
const submitForm = (formEl) => {
  if (!formEl) return
  formEl.validate((valid, fields) => {
    if (valid) {
      let data = {
        ...formData
      };
      let url = new_house_id ?"admin/house/new/update":"admin/house/new/create"
      btnLoading.value = true
      proxy.$axios
          .post(url,data)
          .then((res) => {
            btnLoading.value = false
            if (res.data.code == 200) {
              proxy.$message({message: "保存成功！", type: "success"})
              // router.push("/help")
            } else {
              proxy.$message({message: res.data.msg, type: "error"})
            }
          })
          .catch((err) => {
            btnLoading.value = false
          })
    }
  })
}
const selectOptionsConfig = {
  pianqu_id:{url:'common/dataSelect/painQuSelect',params:{}},
  type_id:{url:'common/dataSelect/houseTagSelect',params:{p_id:1}},
  jiegou_id:{url:'common/dataSelect/houseTagSelect',params:{p_id:7}},
  shuidian_id:{url:'common/dataSelect/houseTagSelect',params:{p_id:13}},
  trait_id:{url:'common/dataSelect/houseTagSelect',params:{p_id:8}},

}
const selectOptions = reactive({
  pianqu_id:[],
  type_id:[],
  jiegou_id:[],
  shuidian_id:[],
  trait_id:[]
})
const getSelectOptions = () => {
  for (let key in selectOptionsConfig){
    let {url,params} = selectOptionsConfig[key]
    proxy.$axios
        .get(url,{params:params})
        .then((res) => {
          if (res.data.code == 200) {
            let arr;
            if(url == 'common/dataSelect/houseTagSelect'){
              arr = res.data.data.map(item => {
                return {
                  label:item.house_tag_title,
                  value:item.house_tag_id,
                }
              })
            }
            if(url == 'common/dataSelect/painQuSelect'){
              arr = res.data.data.map(item => {
                return {
                  label:item.pianqu_title,
                  value:item.pianqu_id,
                }
              })
            }
            selectOptions[key] = arr
          } else {
            proxy.$message({
              message: res.data.msg,
              type: "error"
            })
          }
        })
        .catch((err) => {
        })
        .finally(()=>{
          loading.value = false
        })
  }
}
const handleLon = ()=> {
  window.open("https://lbs.qq.com/getPoint/");
}
</script>

<style lang="less" scoped>
/deep/.el-form .el-form-item__content .el-input, .el-form .el-form-item__content .el-textarea, .el-form .el-form-item__content .el-date-editor--datetime .el-input__wrapper {
  width: 400px !important;
}
</style>
